<template>
	<view class="box">
		<view class="status_bar"></view>
		<view class="locationBar">
			<view class="locationBox">
				<view><uni-icons color="#fff" type="location" size="50rpx"></uni-icons></view>
				<view class="locationBox-local">滨江国际</view>
				<view class="locationBox-span">啥水湾东门店</view>
			</view>
			<view class="entryBox">
				<uni-icons color="#fff" type="shop-filled" size="70rpx"></uni-icons>
				<uni-icons color="#fff" type="chatboxes" size="70rpx"></uni-icons>
			</view>
		</view>
		<view class="searchBar">
			<view class="searchBar-scan"><uni-icons color="#546afc" type="scan" size="50rpx"></uni-icons></view>
			<input class="searchBar-input" type="text" placeholder="端午礼盒">
			<view class="searchBar-button">搜索</view>
		</view>
		<view class="skuBox contentBox">
			<uv-scroll-list indicatorStyle="margin-top:0">
				<view class="skuList">
					<view v-for="(item, index) in 20" :key="index" class="skuItem">
						<image class="skuItem-img" src="https://wwc.alicdn.com/avatar/getAvatar.do?width=60&height=60"
							mode="heightFix"></image>
						<view class="skuItem-title">蔬菜豆制</view>
					</view>
				</view>
			</uv-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.box {
		padding: 0 30rpx;
		background: linear-gradient(to bottom, rgba(67, 117, 253, 1), rgba(67, 117, 253, 0) 900rpx);
		min-height: 100vh;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		
		.contentBox{
			margin: 30rpx 0;
		}
	}

	.locationBar {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.locationBox {
			display: flex;
			align-items: center;
			color: #fff;

			&-local {
				padding: 0 10rpx;
			}

			&-span {
				font-size: 20rpx;
				border-radius: 10rpx;
				border: #fff 1px solid;
				padding: 5rpx 10rpx;
			}
		}

		.entryBox {
			display: flex;
			align-items: center;

			uni-icons {
				padding-left: 10rpx;
			}
		}
	}

	.searchBar {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 5rpx;
		border-radius: 50rpx;
		overflow: hidden;

		&-scan {
			flex-shrink: 0;
			padding: 0 20rpx;
		}

		&-input {
			width: 100%;
		}

		&-button {
			flex-shrink: 0;
			background: rgb(84, 106, 252);
			color: #fff;
			border-radius: 50rpx;
			padding: 15rpx 30rpx;
			margin-left: 20rpx;
		}
	}

	.skuBox {
		background: #fff;
		border-radius: 20rpx;

		.skuList {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			height: 380rpx;

			.skuItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 15rpx 20rpx;

				&-img {
					border-radius: 100%;
					width: 100rpx;
					height: 100rpx;
				}
 
				&-title {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>